<template>
  <div class="right-controls">
    <p class="title">
      设置
    </p>
    <div class="panel-body" v-if="selectedObj">
      <div class="panel-group" v-if="!isVueComp">
        <p class="group-title">
          内容
        </p>
        <div class="group">
          <span class="group-label">label</span>
          <el-input placeholder="标题" v-model="selectedObj.attrs.label.text" size="mini" @input="propChange" />
        </div>
      </div>
      <div class="panel-group">
        <p class="group-title">
          样式
        </p>
        <div class="group">
          <span class="group-label">角度</span>
          <el-input v-model="selectedObj.angle" type="number" size="mini" class="w-120px" @change="propChange" />
        </div>
        <div class="group">
          <span class="group-label">位置</span>
          <el-input v-model="selectedObj.position.x" type="number" size="mini" @change="propChange('position')">
            <template #prepend>
              X
            </template>
          </el-input>
          <el-input v-model="selectedObj.position.y" type="number" size="mini" @change="propChange('position')">
            <template #prepend>
              Y
            </template>
          </el-input>
        </div>
        <div class="group">
          <span class="group-label">尺寸</span>
          <el-input v-model="selectedObj.size.width" type="number" size="mini" @change="propChange">
            <template #prepend>
              W
            </template>
          </el-input>
          <el-input v-model="selectedObj.size.height" type="number" size="mini" @change="propChange">
            <template #prepend>
              H
            </template>
          </el-input>
        </div>
        <!-- #region 通用组件的属性 -->
        <div class="group" v-if="!isVueComp">
          <span class="group-label">填充</span>
          <el-color-picker v-model="selectedObj.attrs.body.fill" size="mini" @change="propChange" />
        </div>
        <div class="group" v-if="!isVueComp">
          <span class="group-label">边框</span>
          <el-input
            v-model="selectedObj.attrs.body.strokeWidth" type="number" size="mini" class="w-120px"
            @change="propChange"
          />
          <el-color-picker v-model="selectedObj.attrs.body.stroke" size="mini" @change="propChange" />
        </div>
        <div class="group" v-if="!isVueComp">
          <span class="group-label">文字</span>
          <el-input
            v-model="selectedObj.attrs.text
              .fontSize" type="number" size="mini" class="w-120px" @change="propChange"
          />
          <el-color-picker v-model="selectedObj.attrs.label.fill" size="mini" @change="propChange" />
        </div>
        <div class="group" v-if="!isVueComp">
          <span class="group-label">对齐</span>
          <el-input v-model="selectedObj.attrs.text.refX" type="number" size="mini" @change="propChange('position')">
            <template #prepend>
              refX
            </template>
          </el-input>
          <el-input v-model="selectedObj.attrs.text.refY" type="number" size="mini" @change="propChange('position')">
            <template #prepend>
              refY
            </template>
          </el-input>
        </div>
        <!-- #endregion -->

        <div class="group">
          <span class="group-label">层级</span>
          <el-input v-model="selectedObj.zIndex" type="number" size="mini" class="w-120px" @change="propChange" />
        </div>
        <p class="group-title">
          数据
        </p>

        <!-- #region customTable -->
        <template v-if="selectedObj.shape === 'vue-customTable'">
          <div class="group">
            <span class="group-label">标题</span>
            <el-input v-model="customTableData.title" size="mini" @input="propChange" />
          </div>
          <div class="group">
            <el-table border :data="customTableData.list" size="mini">
              <el-table-column width="50" align="center">
                <template #header>
                  <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addCustomTableData" />
                </template>
                <template #default="scope">
                  <el-button type="danger" icon="el-icon-minus" circle size="mini" @click="delCustomTableData(scope)" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="别名" width="80">
                <template #default="scope">
                  <el-input v-model="scope.row.name" size="mini" @input="propChange('customTableData')" />
                </template>
              </el-table-column>
              <el-table-column prop="sensorCode" label="数据源">
                <template #default="scope">
                  <el-select
                    v-model="scope.row.sensorCode" class="w-100" size="mini" filterable placeholder="Select" multiple collapse-tags clearable
                    @change="changeSensorSelect"
                  >
                    <el-option
                      v-for="item in sensorListFilter" :key="item.cdCode" :label="`${item.areaLocation}（${item.sensorTypeName}）`"
                      :disabled="item.disabled" :value="item.cdCode"
                    />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
        <!-- #endregion -->

        <!-- #region json -->
        <div class="group" v-else>
          <el-input
            v-model="selectedData" type="textarea" @blur="propChange('data')"
            :autosize="{ minRows: 4, maxRows: 50 }"
          />
        </div>
        <!-- #endregion -->
      </div>
    </div>
    <div v-else>
      未选中
    </div>
  </div>
</template>
<script>
import { cloneDeep, throttle } from 'lodash'
export default {
  data () {
    return {
      selectedObj: null,
      selectedData: '',
      customTableData: {
        title: '',
        timestamp: '',
        list: [{}]
      }
    }
  },
  computed: {
    graph () {
      return this.$store.state.graphStore.graph
    },
    selected () {
      return this.$store.state.graphStore.selected
    },
    isVueComp () {
      return this.selectedObj?.shape.includes('vue-')
    },
    sensorListFilter () {
      return this.$store.getters.sensorListFilter
    }
  },
  methods: {
    attrChange (attr, value) {
      this.$store.commit('SET_SELECTED_ATTR', { key: attr, value })
    },
    // 通用的属性修改方式
    propChange: throttle(function (prop) {
      // 位置需要单独处理成数字 否者会报错
      if (prop === 'position') {
        this.$store.commit('SET_SELECTED_PROP', {
          ...this.selectedObj,
          position: {
            x: Number(this.selectedObj.position.x),
            y: Number(this.selectedObj.position.y)
          }
        })
      } else if (prop === 'customTableData') {
        this.$store.commit('SET_SELECTED_DATA', this.customTableData)
      } else if (prop === 'data') {
        // json字符串方式修改data数据
        try {
          this.$store.commit('SET_SELECTED_DATA', JSON.parse(this.selectedData))
        } catch (error) {
          console.error(error)
        }
      } else {
        // 通用修改
        this.$store.commit('SET_SELECTED_PROP', this.selectedObj)
      }
    }, 300),
    addCustomTableData () {
      this.customTableData.list.push({})
      this.propChange('customTableData')
    },
    // 删除行
    delCustomTableData (scope) {
      this.customTableData.list.splice(scope.$index, 1)
      this.saveCheckedSensor()
      this.propChange('customTableData')
    },
    changeSensorSelect () {
      this.saveCheckedSensor()
      // 更新
      this.propChange('customTableData')
    },
    // 保存所有选中的sensor
    saveCheckedSensor () {
      const checked = []
      this.graph.getNodes().forEach(item => {
        if (item.shape === 'vue-customTable') {
          checked.push(...item.data.list.map(node => node.sensorCode).flat())
        }
      })
      this.$store.commit('SET_SENSOR_CHECK_LIST', checked)
    }
  },
  watch: {
    selected (val) {
      if (val) {
        this.selectedObj = cloneDeep(val.getProp())
        if (val.shape === 'vue-customTable') {
          this.customTableData = this.selectedObj.data
        } else {
          this.selectedData = JSON.stringify(this.selectedObj.data, null, '  ')
        }
      } else {
        this.selectedObj = null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.right-controls {
  width: 400px;
  order: 3;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;

  .title {
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 0 16px -5px rgba(0, 0, 0, .2);
    height: 40px;
    line-height: 40px;
    margin: 0;
    margin-bottom: 10px;
    color: #66b1ff;
  }

  .panel-body {
    flex: 1;
    padding: 12px;

    .panel-group {
      display: flex;
      flex-direction: column;
      grid-gap: 8px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      font-size: 12px;
      text-align: left;

      &:not(:last-child) {
        border-bottom: 1px solid #ccc;
      }

      .group-title {
        margin: 0;
        font-size: 14px;
      }

      .group {
        display: flex;
        flex-direction: row;
        align-items: center;

        *:not(:last-child) {
          margin-right: 8px;
        }

        .group-label {
          color: rgba(0, 0, 0, .45);
          word-break: keep-all;
        }

        :deep(.el-input-group__prepend) {
          padding: 0 10px;
        }

        .w-120px {
          width: 120px;
        }
        .w-100{
          width: 100%
        }

        :deep(.el-select .el-tag){
          max-width: 60%;
        }
      }
    }
  }
}
</style>
